<template>
	<view class="count-box">
  <view >{{days}}</view>
  <view class="count-info">天</view>
  <view >{{hours}}</view>
  <view class="count-info">时</view>
  <view >{{minutes}}</view>
  <view class="count-info">分</view>
  <view >{{seconds}}</view>
  <view class="count-info">秒</view>
</view>
</template>

<script>
const util = require('@/util/util.js');
export default {
	props: {
		setTime: {
      type: Number,
      value: 0
    },
		color:{
			default: '',
			type: String
		},
    fontSize:{
			default: '',
			type: String
		}
	},
	data() {
		return {
    coutDownTime: (new Date().getTime() ),
    coutDownTimeChina: '',
    coutTimer: '',
    days:0,
    hours: '',
    minutes: '',
    seconds: '',
		}
	},
	methods: {
    formatDuringDays(mss) {
      var days = parseInt(mss / (1000 * 60 * 60 * 24));
      days = days > 0 ? days  : '0';
      var hours = parseInt((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      hours = `${hours < 10 ? '0' : ''}${hours < 0 ? 0 : hours}`;
      var minutes = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60));
      minutes = `${minutes < 10 ? '0' : ''}${minutes < 0 ? 0 : minutes}分`;
      var seconds = parseInt((mss % (1000 * 60)) / 1000);
      seconds = `${seconds < 10 ? '0' : ''}${seconds < 0 ? 0 : seconds}秒`;
      return days
      // return `${days}${hours}${minutes}${seconds}`
    },
    formatDuringHours(mss) {
      var days = parseInt(mss / (1000 * 60 * 60 * 24));
      days = days > 0 ? days + '天' : '';
      var hours = parseInt((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      hours = `${hours < 10 ? '0' : ''}${hours < 0 ? 0 : hours}`;
      var minutes = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60));
      minutes = `${minutes < 10 ? '0' : ''}${minutes < 0 ? 0 : minutes}分`;
      var seconds = parseInt((mss % (1000 * 60)) / 1000);
      seconds = `${seconds < 10 ? '0' : ''}${seconds < 0 ? 0 : seconds}秒`;
      return hours
      // return `${days}${hours}${minutes}${seconds}`
    },
    formatDuringMinutes(mss) {
      var days = parseInt(mss / (1000 * 60 * 60 * 24));
      days = days > 0 ? days + '天' : '';
      var hours = parseInt((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      hours = `${hours < 10 ? '0' : ''}${hours < 0 ? 0 : hours}时`;
      var minutes = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60));
      minutes = `${minutes < 10 ? '0' : ''}${minutes < 0 ? 0 : minutes}`;
      var seconds = parseInt((mss % (1000 * 60)) / 1000);
      seconds = `${seconds < 10 ? '0' : ''}${seconds < 0 ? 0 : seconds}秒`;
      return minutes
      // return `${days}${hours}${minutes}${seconds}`
    },
    formatDuringSeconds(mss) {
      var days = parseInt(mss / (1000 * 60 * 60 * 24));
      days = days > 0 ? days + '天' : '';
      var hours = parseInt((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      hours = `${hours < 10 ? '0' : ''}${hours < 0 ? 0 : hours}时`;
      var minutes = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60));
      minutes = `${minutes < 10 ? '0' : ''}${minutes < 0 ? 0 : minutes}分`;
      var seconds = parseInt((mss % (1000 * 60)) / 1000);
      seconds = `${seconds < 10 ? '0' : ''}${seconds < 0 ? 0 : seconds}`;
      return seconds
      // return `${days}${hours}${minutes}${seconds}`
    },
    startCout() {
      let tempTime = parseInt(this.coutDownTime) - new Date().getTime();
      if (tempTime >0) {
        tempTime-=1000;
        this.$emit('countFail',true);
      }else{
        clearInterval(this.coutTimer)
        this.$emit('countFail',false);
      }
      this.days = this.formatDuringDays(tempTime),
      this.hours = this.formatDuringHours(tempTime),
      this.minutes = this.formatDuringMinutes(tempTime),
      this.seconds = this.formatDuringSeconds(tempTime)
    },
    startCoutTimer() {
      this.startCout();
      this.data.coutTimer = setInterval(() => {
        this.startCout();
      }, 1000)
    },
	},
	onReady() {

	},
	async onShow(e) {
		
	},
	async created() {
    let _this = this
    console.log(_this.color,'color');
    if (_this.setTime !== 0) {
      _this.coutDownTime=  _this.setTime
      _this.startCoutTimer();
        return;
      }
      if (uni.getStorageSync('coutDownTime')) {
        _this.coutDownTime = uni.getStorageSync('coutDownTime')
      }
      _this.startCoutTimer();
	},
  destroyed(){
    if (this.setTime === 0) uni.setStorageSync('coutDownTime', this.data.coutDownTime);
      clearInterval(this.coutTimer);
      clearInterval(this.timer);
  },

}
</script>

<style lang="scss" scoped>
.count-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 340rpx;
  height: 56rpx;
  line-height: 56rpx;
  background: #FADAA9;
  border-radius: 20px;
  text-align: center;
  padding: 14rpx 19rpx;
  font-size: 36rpx;
  font-family: Arial;
  font-weight: bold;
  color: #A0411D;
  margin: 0 auto;
}

.count {
  width: 340rpx;
  height: 56rpx;
  line-height: 56rpx;
  background: #FADAA9;
  border-radius: 20px;
  text-align: center;
  padding: 14rpx 19rpx;

}

.count-info {
  font-size: 24rpx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #A0411D;
  text-align: center;
  margin: 0 7rpx;
}
</style>
